<template> 
    <div class="header">
        <el-menu
        :default-active="activeIndex1"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
        background-color="#409EFF"
        text-color="#fff"
        active-text-color="#ffd04b">
            <template v-for="(fLists,fIndex) of list">
                <el-menu-item
                v-if="!fLists.children"
                :key="fLists.id"
                index="fIndex">
                    {{fLists.title}}
                </el-menu-item>

                <el-submenu v-else 
                :key="fLists.id"
                index="fIndex">
                    <template slot="title">{{fLists.title}}</template>
                    <el-menu-item    
                    v-for="sLists of fLists.children" 
                    :key="sLists.id"
                    :index="sLists.id">
                        {{sLists.title}}
                    </el-menu-item>
                </el-submenu>
            </template>
        </el-menu>
    </div>
</template>

<script>
export default {
    name: 'Header',
    data () {
        return {

            list: [{
                title: '用户管理',
                id: '1',
                children: [{
                    title: '用户管理-1',
                    id: '1-1'
                    },{
                    title: '用户管理-2',
                    id: '1-2',
                },{
                    title: '用户管理-3',
                    id: '1-3',
                }]
            },{
                title: '角色管理',
                id: '2',
            }],

            activeIndex1: '1',
            names: 'Sanly'
        }
    },
    methods: {
        handleSelect(key, keyPath) {
            console.log(key, keyPath);
         }
    }
}
</script>

<style lang="stylus" scoped >
.header{
    position: relative;
    width: 100%;
    height: 70px;
    font-size: 22px;
    color: #fff;
}


</style>